<template>
	<div class="row-main">
		<div class="row-bg"></div>
		<div class="row-header">
			<div class="row-sub">
				<h4>可提现</h4>
				<h2>
					<b>{{ list.mayWithdrawAmt || '0' }}</b>
					<em @click="withdrawal">提现</em>
				</h2>
			</div>
		</div>
		<ul>
			<li>
				<em>账户总币</em>
				<span>{{ list.incomeSum || '0' }}</span>
			</li>
			<li>
				<em>总佣金</em>
				<span>{{ list.settleAmt || '0' }}</span>
			</li>
			<li @click="viewInfo">
				<em>已提现</em>
				<span class="act">{{ list.yetWithdrawAmt || '0' }}<i class="van-icon van-icon-arrow van-cell__right-icon"></i></span>
			</li>
			<li>
				<em>期权股</em>
				<span @click="goInfo(list.optionState === '0')" :class="list.optionState === '0' ? 'clo-false' : 'clo-true'">{{ list.optionState === '0' ? '未激活' : list.optionState === '1' ? '已激活' : '-' }}</span>
			</li>
		</ul>
	</div>
</template>

<script>
	import { getFinancialInfo } from '@/api/';
	export default {
		data() {
			return {
				list: ''
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				this.$toast.loading({
				  message: "获取数据中...",
				  forbidClick: true,
				  duration: 0,
				  loadingType: "spinner"
				});
				getFinancialInfo({})
					.then(res => {
						this.$toast.clear()
						if (res.code === 200 && res.data) {
							this.list = res.data
						}
					})
					.catch(msg => {
						this.$toast.clear()
					});
			},
			goInfo(t){
				if(t){
					localStorage.removeItem('viewType')
					this.$router.push({
						path: '/',
						query: {
							info: 'index'
						}
					});
				}
			},
			withdrawal(){
				if(!this.list.mayWithdrawAmt){
					this.$toast({
						message: '暂无提现金额',
						position: 'bottom'
					});
					return
				}
				if(this.list.mayWithdrawAmt < 100){
					this.$toast({
						message: '可用金额小于100',
						position: 'bottom'
					});
					return
				}
				this.$router.push({ path: `/Withdrawal`, query: this.list})
			},
			viewInfo(){
				this.$router.push({ path: `/WithdrawalRecord`, query: {}});
			}
		}
	}
</script>

<style lang="less" scoped>
	.row-main{
		.row-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background: #f2f2f2;
			z-index: 0;
		}
		.row-header{
			background: #DEC07D;
			height: 300px;
			box-sizing: border-box;
			padding-top: 4%;
			border-bottom-left-radius: 40px;
			border-bottom-right-radius: 40px;
			position: relative;
			z-index: 1;
			.row-sub{
				margin: 0 4%;
				background: #fff;
				padding: 4%;
				border-radius: 20px;
				>h4{
					font-weight: 500;
					font-size: 28px;
				}
				>h2{
					font-weight: 600;
					font-size: 40px;
					padding-top: 2%;
					position: relative;
					>em{
						position: absolute;
						right: 3%;
						bottom: 0;
						padding: 8px 7%;
						font-size: 23px;
						text-align: center;
						display: inline-block;
						background: linear-gradient(to right, #fad27d, #f98a42);
						border-radius: 40px;
						color: #fff;
					}
				}
			}
		}
		>ul{
			margin: -70px 4% 0 4%;
			padding: 0 3%;
			position: relative;
			z-index: 6;
			border-radius: 20px;
			background: #fff;
			li{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				padding: 3.8% 4% 3.8% 2%;
				border-bottom: 2px solid #f0f0f0;
				position: relative;
				>em{
					width: 50%;
					font-weight: 500;
					font-size: 26px;
					color: #555;
				}
				>span{
					width: 50%;
					text-align: right;
					font-weight: 500;
					font-size: 28px;
					position: relative;
					&.clo-true{
						color: #8E611F;
					}
					&.clo-false{
						color: #FF0000;
					}
					&.act{
						>i{
							position: absolute;
							height: 30px;
							width: 30px;
							line-height: 30px;
							top: 50%;
							margin-top: -15px;
							text-align: center;
						}
					}
				}
			}
		}
	}
	
</style>
